<template>
  <div class="container">
    <el-card>
      <!-- 头部 -->
      <div class="title">
        <el-link type="danger" disabled
          >说明：目前支持学科和关键字条件筛选</el-link
        >
        <el-button type="success" icon="el-icon-edit" @click="addQustion"
          >新增试题</el-button
        >
      </div>
      <!-- 表单 -->
      <el-form
        :inline="true"
        ref="ruleForm"
        :model="formInline"
        class="demo-form-inline"
        style="margin-top: 20px"
      >
        <!-- -------------------- -->
        <div style="display: flex;justify-content: space-around">
          <el-form-item label="学科" style="margin-left: 27px">
            <el-select v-model="formInline.subjectID" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.subject"
                :value="item.subjectID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录">
            <el-select v-model="formInline.catalogID" placeholder="请选择">
              <el-option
                v-for="item in tableData"
                :key="item.id"
                :label="item.catalog"
                :value="item.catalogID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option
                v-for="item in tagNameData"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model.trim="formInline.keyword"
              placeholder="请根据题干搜索"
              style="width: 217px"
            ></el-input>
          </el-form-item>
        </div>

        <!-- ----------------------- -->
        <div style="display: flex;justify-content: space-around">
          <el-form-item label="试题类型">
            <el-select v-model="formInline.questionType" placeholder="请选择">
              <el-option label="单选" :value="1"></el-option>
              <el-option label="多选" :value="2"></el-option>
              <el-option label="简单" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" style="margin-left: 27px">
            <el-select v-model="formInline.difficulty" placeholder="请选择">
              <el-option label="简单" :value="1"></el-option>
              <el-option label="一般" :value="2"></el-option>
              <el-option label="困难" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in directionList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="formInline.creatorID" placeholder="请选择">
              <el-option label="超级管理员" :value="1"></el-option>
              <el-option label="录入管理员员" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- -------------------------- -->
        <div style="display: flex;justify-content: space-around">
          <el-form-item label="题目备注">
            <el-input
              v-model.trim="formInline.remarks"
              style="width: 217px"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              v-model.trim="formInline.shortName"
              style="width: 217px"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <!-- 市 -->
            <el-select
              v-model="formInline.province"
              placeholder="请选择"
              class="smallBtn"
              @change="changeProvince"
            >
              <el-option
                v-for="(item, index) in provincesList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
              <!-- 区域 -->
            </el-select>
            <el-select
              v-model="formInline.city"
              placeholder="请选择"
              class="smallBtn"
            >
              <el-option
                v-for="item in areaList"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btnFooter">
            <el-button @click="btnClear">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
      <!-- 消息提示 -->
      <div class="messagePrompt">
        <i class="el-icon-info"></i>
        <span class="content">一共有{{ total }}条</span>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%; margin-top: 20px">
        <el-table-column prop="number" label="试题编号" width="260">
        </el-table-column>
        <el-table-column prop="subject" label="学科"> </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column label="题型">
          <template slot-scope="scope">
            {{ getQuestionType(scope.row.questionType) }}
          </template>
        </el-table-column>
        <el-table-column label="题干" width="200">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="200px">
          <template slot-scope="scope">
            {{ scope.row.addDate | formdate }}
          </template>
        </el-table-column>
        <el-table-column label="难度">
          <template slot-scope="scope">
            {{ getDifficulty(scope.row.difficulty) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="100px">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="light"
              content="预览"
              placement="bottom-end"
            >
              <el-button
                type="primary"
                icon="el-icon-view"
                circle
                plain
                @click="topicPreview(scope.row.id)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="修改"
              placement="bottom-end"
            >
              <el-button
                type="success"
                icon="el-icon-edit"
                plain
                circle
                @click="$router.push(`/questions/new?id=${scope.row.id}`)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="删除"
              placement="bottom-end"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="btnDelete(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="light"
              content="加入精选"
              placement="bottom-end"
            >
              <el-button
                type="warning"
                icon="el-icon-check"
                plain
                circle
                @click="setSelect(scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="objPage.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="objPage.pagesize"
        layout=" prev, pager, next,sizes, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 题目预览对话框 -->
    <!-- v-if为真的时候，走生命周期 -->
    <quesPreview
      :dialogVisible.sync="dialogVisible"
      :id="id"
      v-if="dialogVisible"
    ></quesPreview>
  </div>
</template>
<script>
import { lists, remove, choiceAdd } from '@/api/hmmm/questions'
import { list } from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'
import quesPreview from '@/module-hmmm/components/questions-preview.vue'
export default {
  components: {
    quesPreview
  },
  data () {
    return {
      formInline: {
        subjectID: '', // 学科
        catalogID: '', // 目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        shortName: '', // 企业简称
        remarks: '', // 题目备注
        city: '', // 城市
        province: '', // 省
        tags: '' // 标签,
      },
      id: '',
      idEdit: '',
      tableData: [], // 基础题库列表
      tagNameData: [], // 标签数据列表
      directionList: direction, // 方向区域列表
      provincesList: provinces(), // 城市区域列表
      areaList: [], // 区域区域列表
      objPage: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      dialogVisible: false,
      formLabelWidth: '120px',
      choiceState: '' // 精选
    }
  },
  created () {
    this.getQuestionList() // 学科列表
    this.getTagList() // 标签列表
  },
  methods: {
    // 获取基础题库数据
    async getQuestionList () {
      const res = await lists(this.objPage)
      // console.log(res, 99999)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 标签
    async getTagList () {
      const res = await list()
      this.tagNameData = res.data.items
    },
    // 题型
    getQuestionType (n) {
      if (n === '1') {
        return '单选'
      } else if (n === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    // 难度
    getDifficulty (n) {
      if (n === '1') {
        return '简单'
      } else if (n === '2') {
        return '一般'
      } else {
        return '困难'
      }
    },
    // 监听市的变化，区跟随变化
    changeProvince () {
      this.areaList = citys(this.formInline.province)
    },
    // 查询功能
    async onSubmit () {
      const formInline = this.formInline
      const objPage = this.objPage
      const obj = Object.assign(formInline, objPage)
      const res = await lists(obj)
      // 筛选标签类别中的数据
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 清除功能
    btnClear () {
      this.formInline = {
        subjectID: '', // 学科
        catalogID: '', // 目录
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        shortName: '', // 企业简称
        remarks: '', // 题目备注
        city: '', // 城市
        province: '', // 省
        tags: '' // 标签,
      }
    },
    handleClick (row) {
      console.log(row)
    },
    // 当前页的条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.objPage.pagesize = val
      this.getQuestionList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.objPage.page = val
      this.getQuestionList()
    },
    // 题目预览
    async topicPreview (id) {
      this.id = id
      this.dialogVisible = true
    },
    // 添加试题-->跳转试题录入页面
    addQustion () {
      this.$router.push({
        path: '/questions/new'
      })
    },
    // 修改--->去试题录入页面
    questionsAddEdit (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id,
          name: row.tags
        }
      })
    },
    // 删除功能
    async btnDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(row)
          if (res.status !== 200) return this.$message.error('删除失败')
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          //  总页数
          // Math.ceil返回最小整数
          const totalPage = Math.ceil((this.total - 1) / this.objPage.pagesize)
          this.objPage.page =
            this.objPage.page > totalPage ? totalPage : this.objPage.page
          this.objPage.page = this.objPage.page < 1 ? 1 : this.objPage.page
          this.getQuestionList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 加入精选
    setSelect (row) {
      console.log(row.id)
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      })
        .then(async () => {
          await choiceAdd({
            id: row.id,
            choiceState: 1
          })
          this.$message({
            type: 'success',
            message: '加入精选成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消精选'
          })
        })
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  justify-content: space-between;
}
span {
  // color: red;
  font-size: 14px;
}
.btnFooter {
  margin-left: 110px;
}
.smallBtn {
  width: 100px;
  margin: 0 8px;
}
.messagePrompt {
  background-color: #f4f4f5;
  color: #909399;
  padding: 8px 16px;
  margin-bottom: 15px;
  .content {
    padding: 0 8px;
  }
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
